<template>
    <el-card>
      <NavBar>
        <el-form-item label="名称">
          <el-input v-model="search.name" placeholder="请输入名称" />
        </el-form-item>
        <template #right>
          <el-button type="primary" icon="search" @click="init(1)">搜索</el-button>
          <el-button type="primary" icon="refresh" @click="reset">重置</el-button>
        </template>
      </NavBar>
    </el-card>
    <div class="flex justify-end items-center h-[60px]">
      <el-button icon="plus" type="primary" @click="add_visible = true">添加</el-button>
    </div>
    <el-card>
      <el-table :data="tableData" style="width: 100%;height: 30rem;" stripe>
        <el-table-column prop="name" label="名称" min-width="120" />
        <el-table-column prop="description" label="描述" min-width="120" />
        <el-table-column prop="createAt" label="创建时间" min-width="220">
          <template #default="scope">
            {{ checkTime(scope.row.CreatedAt) }}
          </template>
        </el-table-column>
        <el-table-column prop="updateAt" label="更新时间" min-width="220">
          <template #default="scope">
            {{ checkTime(scope.row.UpdatedAt) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150" fixed="right">
          <template #default="scope">
            <div class="flex items-center gap-2">
              <el-button type="primary" @click="openRole(scope.row)">菜单权限</el-button>
              <el-button type="primary" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button type="danger" @click="deleteMsg(handleDelete,scope.row)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <div class="card-footer">
          <div>共&nbsp;{{ totalCount }}&nbsp;{{ "条数据" }}</div>
          <el-pagination
            :current-page="currentPage"
            :page-size="pageSize"
            :page-sizes="[10, 20, 30, 40]"
            :total="totalCount"
            layout="prev, pager, next,sizes, jumper"
            size="small"
            @size-change="handleSizeChange"
            @current-change="init"
          />
        </div>
      </template>
    </el-card>
    <Add v-model="add_visible" @init="init"></Add>
    <Edit v-model="edit_visible" @init="init" :form-data="editRow"></Edit>
    <PermissionConfig v-model="role_visible" :role-id="editRow.id"></PermissionConfig>
  </template>
  
  <script setup lang="ts">
  import PermissionConfig from "./components/PermissionConfig.vue"
  import Add from "./components/Add.vue";
  import Edit from "./components/Edit.vue"
  import NavBar from "@/components/NavBar.vue";
  import { DeleteRole, GetRoleList } from "@/api/roles";
  import { ref } from "vue";
  import loadsh from "lodash"
  import { checkTime } from "@/global";
  import { deleteMsg } from "@/global"
  import { ElMessage } from "element-plus";
  const search = ref<SearchInter>({} as SearchInter);
  const tableData = ref<any[]>([]);
  const currentPage = ref<number>(1);
  const pageSize = ref<number>(10);
  const totalCount = ref<number>(0);
  const editRow = ref<any>({})
  const edit_visible = ref<boolean>(false)
  const add_visible = ref<boolean>(false)
  const role_visible = ref<boolean>(false)


  const openRole = (row:any) => {
    editRow.value = row
    role_visible.value = true
  }
  
  const init = async (page: number = 1) => {
    const res = await GetRoleList({
      pageIndex: page,
      pageSize: pageSize.value,
      ...search.value,
    });
    if (res.code === 200) {
      totalCount.value = res.totalCount;
      tableData.value = res.data;
    } else {
      tableData.value = [];
    }
  };
  
  const handleSizeChange = (val: number) => {
    pageSize.value = val;
    init(currentPage.value);
  };
  
  const handleEdit = (row: any) => {
    editRow.value = loadsh.cloneDeep(row)
    edit_visible.value = true
  };
  
  const handleDelete = async (row: any) => {
    const res = await DeleteRole([row.id])
    if (res.code === 200) {
      ElMessage.success(res.msg);
      init(currentPage.value);
    } else {
      ElMessage.error(res.msg);
    }
    
  };
  const reset = () => {
    search.value = {} as SearchInter;
    init();
  };
  init();
  </script>
  
  <style scoped></style>
  